<style lang="less" scoped>
@primary-color:#FE9333;//橘黄色默认颜色
@write-color:#fff;//白色默认颜色
.warp{
    width: 240px;
    height: 100%;
    background: #2B2B2B;
    overflow: hidden;
    .headImg{
        width: 100px;
        height: 100px;
        border-radius: 50%;
        margin: 100px 0 14px 70px;
        img{
            width: 100%;
            height: 100%;
            border-radius: 50%;
        }
    }
    .username{
        line-height: 22px;
        margin-bottom: 44px;
        text-align: center;
        color: #fff;
        font-size: 16px;
    }
    .list{
        border-top: 1px solid #000;        
        li{
            width: 100%;
            height: 50px;
            line-height: 50px;
            border-bottom: 1px solid #000;
            cursor: pointer;
            font-size: 16px;
            color: #B5BDC2;
            span{
                width: 20px;
                height: 20px;
                display: inline-block;
                vertical-align: middle;
                margin:0 27px 0 67px;
            }
        }
        
        .span1{
                background: url("../images/usercenter_leftnav_grzl.png") no-repeat;
                background-size: 100% 100%;
        }
        .span2{
                background: url("../images/usercenter_leftnav_aqsz.png") no-repeat;
                background-size: 100% 100%;
        }
        .span3{
                background: url("../images/usercenter_leftnav_zjxx.png") no-repeat;
                background-size: 100% 100%;
        }
        .span4{
                background: url("../images/usercenter_leftnav_xxzx.png") no-repeat;
                background-size: 100% 100%;
        }   
        .li1:hover,.on1{
            border-bottom: 1px solid #FE9333;
            color: #FE9333;
            .span1{
                background: url("../images/usercenter_leftnav_grzl_hover.png") no-repeat;
                background-size: 100% 100%;
            }
        }
        .li2:hover,.on2{
            border-bottom: 1px solid #FE9333;
            color: #FE9333;
            .span2{
                background: url("../images/usercenter_leftnav_aqsz_hover.png") no-repeat;
                background-size: 100% 100%;
            }
        }
         .li3:hover,.on3{
             border-bottom: 1px solid #FE9333;
            color: #FE9333;
            .span3{
                background: url("../images/usercenter_leftnav_zjxx_hover.png") no-repeat;
                background-size: 100% 100%;
            }
        }
         .li4:hover,.on4{
             border-bottom: 1px solid #FE9333;
            color: #FE9333;
            .span4{
                background: url("../images/usercenter_leftnav_xxzx_hover.png") no-repeat;
                background-size: 100% 100%;
            }
        }
    }
    .backhome{
        width: 160px;
        height: 40px;
        font-size: 14px;
        color: @primary-color;
        text-align: center;
        line-height: 40px;
        border: 1px solid @primary-color;
        border-radius: 4px;
        cursor: pointer;
        margin:  100px 0 0 40px;
    }

}
</style>
<template>
	<div class="warp">
        <!--头像-->
        <div class="headImg"><img :src=" (headerPicture==null || headerPicture=='null'||headerPicture=='') ?  staticimg + '/images/boy-2.png':imgurl + headerPicture " /></div>
        <!--用户名-->
        <p class="username">{{username ? username :""}}</p>
        <!--列表-->
        <ul class="list">
            <li @click="userData" :class="li1"><span class="span1"></span>个人资料</li>
            <li @click="safeSet" :class="li2"><span class="span2"></span>安全设置</li>
            <li @click="zjData" :class="li3"><span class="span3"></span>传记信息</li>
            <li @click="messageCenter" :class="li4"><span class="span4"></span>消息中心</li>
        </ul>
        <!--返回首页-->
        <div class="backhome" @click="backhome()">返回首页</div>
        <v-notice></v-notice>
    </div>
</template>
<script>
    import global from '../config/global'
	import { mapState } from 'vuex'
    import { USER_SIGNIN } from 'store/user'
    export default {
        computed: mapState({ user: state => state.user }),
		data() {
				return {
                    staticimg:global.staticimg,
                    imgurl:global.imgurl,
                    hotsimg:"",
				}
			},
        created() {            
        },
        props:["li1","li2","li3","li4","headerPicture","username"],
		methods:{
            userData(){
                this.$router.push({ path: '/usercenter' });//跳转个人中心 用户资料               
            },
            safeSet(){
                this.$router.push({ path: '/usercenterSafe' });//跳转个人中心 安全设置                
            },
            messageCenter(){
                this.$router.push({ path: '/usercenterMessage',query:{"type":2}});//跳转个人中心 消息中心                
            },
            zjData(){
                this.$router.push({ path: '/usercenterZj' });//跳转个人中心 传记信息               
            },
            backhome(){
                this.$router.push({ path: '/home' });//跳转个人中心 传记信息
            },
		}
    }
</script>